<template>
  <div class="main">
    <div class="content">
      <router-view />
    </div>
    <div class="footer">
      <span><a href="https://github.com/htfc786/medicine-reminder" target="_blank">medicine-reminder</a> by htfc786</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

// 使中间容器铺满
const changeContentMinHeight = () => {
  const footerHeight = (<HTMLElement>document.querySelector(".footer"))?.offsetHeight;
  const content = <HTMLElement>document.querySelector(".content");
  const contentMinHeight = window.innerHeight - footerHeight;
  content.style.minHeight = contentMinHeight + "px";
};

onMounted(() => {
  window.addEventListener("resize", changeContentMinHeight);
  changeContentMinHeight();
});

onUnmounted(() => {
  window.removeEventListener("resize", changeContentMinHeight);
})

</script>

<style scoped>
.footer {
  padding: 12px;
  text-align: center;
  background: #efefef;
  font-size: 14px;
}
.footer span {
  display: block;
  margin: 0;
}

</style>
